/* ===== Base bar ===== */
.custom-navbar {
  background-color: rgba(0, 32, 18, 0.933);
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: 1000; transition: top .3s ease;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.custom-footer { background-color: rgba(0, 32, 18, 0.933); position: static; width:100%; height:68px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; margin-top:2rem; }
.navbar-nav .nav-link { color: #fff; font-size: 16px; padding: 8px 4px; position: relative; transition: color .3s; }
.navbar-nav .nav-link:hover { color: #33ff88 !important; text-decoration: underline; }
.navbar-nav .nav-link.active { color: #33ff88 !important; font-weight: 700; position: relative; z-index: 1; }
.navbar-nav .nav-link.active::after { content:""; position:absolute; left:0; right:0; bottom:1px; margin:0 auto; width:60%; height:3px; background:#33ff88; border-radius:2px; }
.navbar-nav { gap: 28px; }

/* Toggler */
.custom-navbar .navbar-toggler { border-color:#ffffff !important; }
.custom-navbar .navbar-toggler .hamburger {
  display: block; width: 24px; height: 24px;
  stroke: #ffffff; stroke-width: 2.2; stroke-linecap: round; fill: none;
}
.custom-navbar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.25); }
.custom-navbar .navbar-toggler-icon { background-image: var(--bs-navbar-toggler-icon-bg) !important; opacity: 1 !important; }

/* Auth buttons */
.auth-buttons { display:flex; gap:12px; }
.auth-buttons a{
  display:inline-block; padding:8px 24px; border-radius:25px;
  font-size:15px; font-weight:700; text-decoration:none;
  background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%);
  color:#002012; box-shadow:0 2px 6px rgba(0,0,0,.3); transition: filter .2s, transform .2s;
}
.auth-buttons a:hover{ filter:brightness(.9); transform:translateY(-1px); }

@media (max-width: 768px) {
  .auth-buttons{ flex-direction:column; align-items:center; }
  .auth-buttons a{ width:auto; margin-bottom:8px; text-align:center; }
  .auth-buttons a:last-child{ margin-bottom:0; }
}

/* Profile dropdown */
.user-dropdown-btn{ background:transparent; border:1px solid rgba(255,255,255,.25); border-radius:10px; padding:.35rem .6rem; }
.user-dropdown-btn:hover{ border-color:#34d399; box-shadow:0 0 0 .1rem rgba(52,211,153,.25); }
.user-initials{ width:30px; height:30px; background:#25a34a; border-radius:50%; color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; text-transform:uppercase; font-size:13px; }
.user-fullname{ font-weight:600; color:#fff; }

/* Dropdown theme */
.gsg-dropdown{
  background: linear-gradient(180deg, #0a211a 0%, #0e2c23 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  overflow:hidden;
}
.gsg-dropdown .dropdown-item{ padding:.7rem 1rem; color:#e5e7eb; }
.gsg-dropdown .dropdown-item:hover{ background: rgba(52,211,153,.12); color:#fff; }
.gsg-dropdown .dropdown-divider{ border-top:1px solid rgba(255,255,255,.08); }

/* Notifications */
.notif-bell{
  color:#fff; position:relative; margin-right:10px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.notif-bell:hover{
  transform: translateY(-1px);
  border-color: rgba(52,211,153,.5);
  box-shadow: 0 0 0 .12rem rgba(52,211,153,.18);
}
.notif-icon svg{ width:22px; height:22px; color:#ffffff; }
.notif-badge{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px;
  border-radius:10px; background:#ffffff; color:#002012;
  border:1px solid rgba(0,0,0,.35); font-size:11px; font-weight:800;
  display:none; align-items:center; justify-content:center; line-height:18px;
}
.notif-badge.show{ display:inline-flex; background:#ef4444; color:#fff; animation: gsg-badge-pulse 2s ease-in-out infinite; }
@keyframes gsg-badge-pulse{
  0%{ transform: scale(1); box-shadow:0 0 0 0 rgba(239,68,68,.35); }
  50%{ transform: scale(1.06); box-shadow:0 0 0 6px rgba(239,68,68,0); }
  100%{ transform: scale(1); box-shadow:0 0 0 0 rgba(239,68,68,0); }
}

/* Drawer */
.notif-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  display:none;
  z-index:1190;          /* was 999 – now above the navbar */
}
.notif-overlay.show{
  display:block;
}

.notif-drawer{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:380px;
  color:#d8efe6;
  background: radial-gradient(120% 120% at 20% 0%, #0e3127 0%, #07241d 60%, #061b16 100%);
  border-left: 2px solid rgba(52,211,153,.25);
  box-shadow:-6px 0 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  transform:translateX(100%);
  transition:transform .25s ease;
  z-index:1200;          /* was 1001 – now clearly above header (1040) */
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.notif-drawer::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(52,211,153,.14) 1px, transparent 1px),
    linear-gradient(0deg, rgba(52,211,153,.12) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  opacity:.35;
}
.notif-drawer.open{ transform:translateX(0); }
.notif-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(52,211,153,.25); background: linear-gradient(180deg, rgba(6,27,22,.6), rgba(6,27,22,.25)); }
.notif-circle-count{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#22c55e; color:#062a20; font-size:12px; font-weight:800; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.notif-header .btn-close{ filter: invert(1) grayscale(1); opacity:.7; }
.notif-header .btn-close:hover{ opacity:1; }
.notif-list{ flex:1; overflow-y:auto; padding:8px 0; }
.notif-item{ position:relative; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.06); cursor:pointer; background: rgba(255,255,255,.02); transition: background .15s ease, transform .12s ease, border-color .2s ease; }
.notif-item.unread{ box-shadow: inset 3px 0 0 #33ff88; background: rgba(50,255,150,.05); }
.notif-item:hover{ background: rgba(52,211,153,.12); transform: translateX(2px); }
.notif-item .title{ font-weight:700; margin-bottom:4px; color:#ffffff; }
.notif-item .message{ font-size:14px; white-space:pre-line; color:#cde7dd; }
.notif-item small{ color:#9fb4ac; }
.notif-empty{ text-align:center; color:#9fb4ac; padding:40px 16px; }
.notif-empty img{ width:72px; opacity:.55; margin-bottom:10px; }
.notif-footer{ display:flex; align-items:center; gap:12px; border-top:1px solid rgba(52,211,153,.25); padding:10px 12px; background: linear-gradient(180deg, rgba(6,27,22,.15), rgba(6,27,22,.35)); }
#markAllSeenBtn{ border-radius:12px; border:1px solid rgba(52,211,153,.35); background:transparent; color:#d1fae5; font-weight:800; letter-spacing:.2px; padding:6px 12px; }
#markAllSeenBtn:hover{ background: linear-gradient(90deg, #22c55e 0%, #10b981 100%); color:#052016; box-shadow: 0 0 0 3px rgba(52,211,153,.20), 0 8px 20px rgba(0,0,0,.25); }

/* Offcanvas */
.offcanvas.text-bg-dark { background: linear-gradient(135deg, rgba(10,48,33,.88) 0%, rgba(8,39,29,.86) 35%, rgba(5,26,20,.85) 70%, rgba(3,16,12,.85) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-left: 1px solid rgba(255,255,255,.08); }
@media (max-width: 991.98px) { .offcanvas.offcanvas-end.gsg-offcanvas { width: clamp(280px, 60vw, 560px); } }
.offcanvas-backdrop.show { background-color: rgba(0, 32, 18, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.offcanvas-header .offcanvas-title{ font-size:1.1rem; color:#fff; line-height:1; }
.mobile-menu-list .list-group-item{ border-color: rgba(255,255,255,.10); padding-left: .85rem; padding-right: .85rem; }
.menu-link{ display:flex; align-items:center; width:100%; padding:.8rem .25rem; color:#ffffff; text-decoration:none; font-size:1.05rem; }
.menu-link:hover{ color:#e6fff2; }
.menu-icon .mi{ width:22px; height:22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Mobile profile card */
.mobile-profile-card{ display:flex; align-items:center; gap:12px; padding:14px 16px; color:#ffffff; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); border-bottom: 1px solid rgba(255,255,255,.10); }
.mobile-profile-card:hover{ background: rgba(255,255,255,.06); }
.mpc-left{ display:flex; align-items:center; justify-content:center; }
.mpc-avatar{ width:42px; height:42px; border-radius:50%; background:#25a34a; color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.25); overflow:hidden; flex:0 0 auto; }
.mpc-initials{ font-size:14px; letter-spacing:.3px; }
.mpc-info{ display:flex; flex-direction:column; min-width:0; }
.mpc-name{ font-weight:700; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ===== THEME MODALS (force dark) ===== */
.gsg-modal .modal-dialog{ max-width: 360px; }
.gsg-modal .modal-content{
  background: radial-gradient(120% 120% at 20% 0%, #0e3127 0%, #07241d 60%, #061b16 100%) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  color: #e7f7ef;
}
.gsg-modal .modal-header,
.gsg-modal .modal-footer{
  background: transparent !important;
  border: 0 !important;
}
.gsg-modal .modal-body{
  background: transparent !important;
  color:#d8efe6 !important;
}
.gsg-modal .btn-close{ filter: invert(1) grayscale(1); opacity:.85; }
.gsg-modal .btn-close:hover{ opacity:1; }
.btn-gsg{ background: linear-gradient(90deg, #22c55e 0%, #10b981 100%); color:#062a20; font-weight:700; border:none; }
.btn-gsg:hover{ filter: brightness(.95); }
.gsg-modal-danger .modal-content{ background: radial-gradient(120% 120% at 20% 0%, #2e0e0e 0%, #240909 60%, #1a0707 100%) !important; border-color: rgba(239,68,68,.35) !important; }
.btn-danger-gsg{ background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%); color: #fff; font-weight: 700; border: none; }
.btn-danger-gsg:hover{ filter: brightness(.95); }

.notif-drawer {
    overflow-y: auto;
    overflow-x: hidden !important;   /* prevents horizontal scroll */
}
.notif-body {
    overflow-y: auto;
    overflow-x: hidden !important;
}
.notif-item {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;   /* prevents long text from forcing sideways scroll */
}